<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { videoTypePageListApi, delSysVideoTypeApi } from '@/api/resLibrary/video'
import { reactive, unref, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElTag, ElButton, ElMessage } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'

const addVideoTypeModel = ref()
const editVideoTypeModel = ref()
const uploadBigFileModel = ref()
const ossUploadModel = ref()
const { push } = useRouter()
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import AddVideoTypeModel from './components/addVideoTypeModel.vue'
import EditVideoTypeModel from './components/editVideoTypeModel.vue'
import UploadBigFileModel from './components/uploadBigFileModel.vue'
import OssUploadModel from './components/ossUploadModel.vue'

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await videoTypePageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh } = tableMethods
const { t } = useI18n()

const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const columns = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    search: {
      hidden: true
    }
  },
  {
    field: 'index',
    label: '序号',
    type: 'index',
    search: {
      hidden: true
    }
  },
  {
    field: 'name',
    label: '名称',
    search: {
      component: 'Input'
    },
    form: {
      component: 'Input',
      colProps: {
        span: 24
      },
      detail: {
        span: 24
      }
    }
  },
  {
    field: 'code',
    label: '编码',
    search: {
      component: 'Input'
    },
    form: {
      component: 'Input',
      colProps: {
        span: 24
      },
      detail: {
        span: 24
      }
    }
  },
  {
    field: 'thumbnailTime',
    label: '缩略图(帧)',
    search: { hidden: true }
  },
  {
    field: 'startPlayTime',
    label: '片头时长(秒)',
    search: { hidden: true }
  },
  {
    field: 'type',
    label: '类型',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <ElTag type={data.row.type === 0 ? 'success' : 'warning'}>
            {data.row.type === 0 ? '学习视频' : '广告'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'cronTab',
    label: '定时任务',
    search: { hidden: true }
  },
  {
    field: 'playType',
    label: '类型',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        const playTypes = data.row.playType ? data.row.playType.split(',') : []
        const containsZero = playTypes.includes('0')
        const containsOne = playTypes.includes('1')
        return (
          <>
            {containsZero && <ElTag>视频</ElTag>}
            {containsOne && (
              <ElTag style="margin-left: 10px;" type="success">
                音频
              </ElTag>
            )}
          </>
        )
      }
    }
  },
  {
    field: 'action',
    width: '280px',
    label: t('tableDemo.action'),
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <>
            <BaseButton type="primary" onClick={() => action(data.row)}>
              编辑
            </BaseButton>
            <BaseButton type="primary" onClick={() => uploadFile(data.row)}>
              上传视频
            </BaseButton>
            <BaseButton type="danger" onClick={() => delAction(data.row)}>
              删除
            </BaseButton>
          </>
        )
      }
    }
  }
])

const currentRow = ref(null)
// @ts-ignore
const { allSchemas } = useCrudSchemas(columns)
const action = (row) => {
  row.displayTime = new Date().getMilliseconds()
  currentRow.value = row
  editVideoTypeModel.value.isShowVideoTypeModel(row)
}
const uploadFile = (row) => {
  console.log(row, 'ppproe')
  row.displayTime = new Date().getMilliseconds()
  currentRow.value = row
  // uploadBigFileModel.value.isShowUploadBigFileModel()
  ossUploadModel.value.isShowOssUploadModel()
}

const AddAction = () => {
  addVideoTypeModel.value.isShowVideoTypeModel()
}
const delAction = (row) => {
  const aa = { id: row.id }
  delSysVideoTypeApi(aa)
    .then((res) => {
      if (res.code == '00000') {
        ElMessage({ message: '删除成功！', type: 'success' })
        getList()
      }
    })
    .finally(() => {})
}
const onSearch = (value) => {
  getList()
}
</script>

<template>
  <ContentWrap>
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
    <div class="mb-10px">
      <BaseButton type="primary" @click="AddAction">新增</BaseButton>
    </div>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      showAction
      :columns="allSchemas.tableColumns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      :pagination="{
        total: total
      }"
      @register="tableRegister"
      @refresh="refresh"
    />
  </ContentWrap>
  <AddVideoTypeModel @on-search="onSearch" ref="addVideoTypeModel" />
  <EditVideoTypeModel @on-search="onSearch" ref="editVideoTypeModel" :current-row="currentRow" />
  <OssUploadModel @on-search="onSearch" ref="ossUploadModel" :current-row="currentRow" />
</template>
